<template>
  <div class="typescript-demo">
    <h2>🎯 TypeScript 类型推断演示</h2>
    
    <div class="demo-grid">
      <div class="demo-section">
        <h3>🎨 ref 泛型类型</h3>
        <div class="type-examples">
          <div class="example-item">
            <div class="code-block">
              <pre><code>const score = ref&lt;number&gt;(98)</code></pre>
            </div>
            <div class="demo-control">
              <label>分数 (number):</label>
              <input 
                v-model.number="score" 
                type="number" 
                @input="validateScore"
                class="type-input"
              >
              <span class="type-badge">{{ typeof score }}</span>
            </div>
            <div class="validation-result" :class="{ error: scoreError }">
              {{ scoreError || '✅ 类型正确' }}
            </div>
          </div>
          
          <div class="example-item">
            <div class="code-block">
              <pre><code>const username = ref&lt;string&gt;('Vue开发者')</code></pre>
            </div>
            <div class="demo-control">
              <label>用户名 (string):</label>
              <input 
                v-model="username" 
                type="text"
                @input="validateUsername"
                class="type-input"
              >
              <span class="type-badge">{{ typeof username }}</span>
            </div>
            <div class="validation-result" :class="{ error: usernameError }">
              {{ usernameError || '✅ 类型正确' }}
            </div>
          </div>
          
          <div class="example-item">
            <div class="code-block">
              <pre><code>const isActive = ref&lt;boolean&gt;(true)</code></pre>
            </div>
            <div class="demo-control">
              <label>激活状态 (boolean):</label>
              <div class="boolean-control">
                <button 
                  @click="isActive = true" 
                  :class="['bool-btn', { active: isActive }]"
                >✅ 是</button>
                <button 
                  @click="isActive = false" 
                  :class="['bool-btn', { active: !isActive }]"
                >❌ 否</button>
              </div>
              <span class="type-badge">{{ typeof isActive }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>🏗️ reactive 复杂类型</h3>
        <div class="complex-types">
          <div class="interface-demo">
            <h4>用户接口定义：</h4>
            <div class="interface-code">
              <pre><code>interface User {
  id: number
  name: string
  email: string
  age: number
  isVip: boolean
  skills: string[]
}</code></pre>
            </div>
          </div>
          
          <div class="user-form">
            <h4>用户信息表单：</h4>
            <div class="form-grid">
              <div class="form-item">
                <label>ID:</label>
                <input 
                  v-model.number="user.id" 
                  type="number" 
                  class="form-input"
                  @blur="validateUserField('id')"
                >
              </div>
              <div class="form-item">
                <label>姓名:</label>
                <input 
                  v-model="user.name" 
                  type="text" 
                  class="form-input"
                  @blur="validateUserField('name')"
                >
              </div>
              <div class="form-item">
                <label>邮箱:</label>
                <input 
                  v-model="user.email" 
                  type="email" 
                  class="form-input"
                  @blur="validateUserField('email')"
                >
              </div>
              <div class="form-item">
                <label>年龄:</label>
                <input 
                  v-model.number="user.age" 
                  type="number" 
                  class="form-input"
                  @blur="validateUserField('age')"
                >
              </div>
              <div class="form-item full-width">
                <label>VIP状态:</label>
                <div class="vip-control">
                  <button 
                    @click="user.isVip = true" 
                    :class="['vip-btn', { active: user.isVip }]"
                  >🌟 VIP</button>
                  <button 
                    @click="user.isVip = false" 
                    :class="['vip-btn', { active: !user.isVip }]"
                  >👤 普通</button>
                </div>
              </div>
            </div>
          </div>
          
          <div class="skills-section">
            <h4>技能列表：</h4>
            <div class="skills-input">
              <input 
                v-model="newSkill" 
                type="text" 
                placeholder="输入新技能"
                class="skill-input"
                @keyup.enter="addSkill"
              >
              <button @click="addSkill" class="add-skill-btn">➕ 添加</button>
            </div>
            <div class="skills-list">
              <div 
                v-for="(skill, index) in user.skills" 
                :key="index"
                class="skill-tag"
              >
                <span>{{ skill }}</span>
                <button @click="removeSkill(index)" class="remove-skill">×</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>🔍 类型验证结果</h3>
      <div class="validation-panel">
        <div class="validation-grid">
          <div class="validation-card">
            <h5>用户对象验证</h5>
            <div class="object-display">
              <pre><code>{{ JSON.stringify(user, null, 2) }}</code></pre>
            </div>
            <div class="type-info">
              <p><strong>类型检查：</strong></p>
              <div class="type-checks">
                <div 
                  v-for="(check, key) in userTypeChecks" 
                  :key="key"
                  :class="['type-check', check.status]"
                >
                  <span class="check-field">{{ check.field }}:</span>
                  <span class="check-type">{{ check.expected }}</span>
                  <span class="check-status">{{ check.status === 'valid' ? '✅' : '❌' }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="validation-card">
            <h5>类型推断演示</h5>
            <div class="inference-demo">
              <div class="inference-item">
                <code>computed&lt;number&gt;()</code>
                <div class="inference-result">
                  计算结果: <strong>{{ computedResult }}</strong> ({{ typeof computedResult }})
                </div>
              </div>
              <div class="inference-item">
                <code>ref&lt;Array&lt;string&gt;&gt;()</code>
                <div class="inference-result">
                  数组长度: <strong>{{ stringArray.length }}</strong> ({{ stringArrayType }})
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="tips-section">
      <h3>💡 TypeScript 最佳实践</h3>
      <div class="tips-grid">
        <div class="tip-card">
          <h4>🎯 使用泛型</h4>
          <p>ref&lt;T&gt;() 和 reactive&lt;T&gt;() 提供类型安全</p>
        </div>
        <div class="tip-card">
          <h4>🔍 接口定义</h4>
          <p>使用 interface 定义复杂对象结构</p>
        </div>
        <div class="tip-card">
          <h4>⚡ 类型推断</h4>
          <p>充分利用 Vue3 的自动类型推断</p>
        </div>
        <div class="tip-card">
          <h4>🛡️ 类型保护</h4>
          <p>运行时验证确保类型安全</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'

// 基础类型示例
const score = ref<number>(98)
const username = ref<string>('Vue开发者')
const isActive = ref<boolean>(true)

// 类型验证错误
const scoreError = ref<string>('')
const usernameError = ref<string>('')

// 用户接口定义
interface User {
  id: number
  name: string
  email: string
  age: number
  isVip: boolean
  skills: string[]
}

// 响应式用户对象
const user = reactive<User>({
  id: 1,
  name: '张三',
  email: 'zhangsan@example.com',
  age: 25,
  isVip: true,
  skills: ['Vue3', 'TypeScript', 'JavaScript']
})

// 新技能输入
const newSkill = ref<string>('')

// 验证函数
const validateScore = () => {
  if (typeof score.value !== 'number') {
    scoreError.value = '❌ 分数必须是数字类型'
  } else if (score.value < 0 || score.value > 100) {
    scoreError.value = '❌ 分数范围应在0-100之间'
  } else {
    scoreError.value = ''
  }
}

const validateUsername = () => {
  if (typeof username.value !== 'string') {
    usernameError.value = '❌ 用户名必须是字符串类型'
  } else if (username.value.length < 2) {
    usernameError.value = '❌ 用户名长度至少2个字符'
  } else {
    usernameError.value = ''
  }
}

const validateUserField = (field: keyof User) => {
  console.log(`🔍 验证字段: ${field}, 值:`, user[field])
  // 这里可以添加更复杂的验证逻辑
}

// 技能管理
const addSkill = () => {
  if (newSkill.value.trim() && !user.skills.includes(newSkill.value.trim())) {
    user.skills.push(newSkill.value.trim())
    newSkill.value = ''
  }
}

const removeSkill = (index: number) => {
  user.skills.splice(index, 1)
}

// 计算属性 - 类型推断演示
const computedResult = computed<number>(() => {
  return score.value * 2 + user.age
})

// 字符串数组
const stringArray = ref<string[]>(['Vue3', 'TypeScript', 'Composition API'])
const stringArrayType = computed(() => {
  return Array.isArray(stringArray.value) ? 'string[]' : typeof stringArray.value
})

// 用户类型检查
const userTypeChecks = computed(() => {
  return [
    { field: 'id', expected: 'number', status: typeof user.id === 'number' ? 'valid' : 'invalid' },
    { field: 'name', expected: 'string', status: typeof user.name === 'string' ? 'valid' : 'invalid' },
    { field: 'email', expected: 'string', status: typeof user.email === 'string' ? 'valid' : 'invalid' },
    { field: 'age', expected: 'number', status: typeof user.age === 'number' ? 'valid' : 'invalid' },
    { field: 'isVip', expected: 'boolean', status: typeof user.isVip === 'boolean' ? 'valid' : 'invalid' },
    { field: 'skills', expected: 'string[]', status: Array.isArray(user.skills) ? 'valid' : 'invalid' }
  ]
})
</script>

<style scoped>
.typescript-demo {
  max-width: 1200px;
  margin: 30px auto;
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  color: white;
  font-family: 'Arial', sans-serif;
}

.typescript-demo h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
}

.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.demo-section {
  background: rgba(255, 255, 255, 0.1);
  padding: 25px;
  border-radius: 15px;
}

.demo-section h3 {
  margin-bottom: 20px;
  font-size: 18px;
  color: #42b883;
}

.type-examples {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.example-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 10px;
}

.code-block {
  background: #1e1e1e;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow-x: auto;
}

.code-block pre {
  margin: 0;
  color: #d4d4d4;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

.demo-control {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.demo-control label {
  font-weight: bold;
  min-width: 120px;
}

.type-input {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 14px;
}

.type-badge {
  background: #42b883;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.validation-result {
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: bold;
}

.validation-result.error {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

.validation-result:not(.error) {
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

.boolean-control {
  display: flex;
  gap: 10px;
}

.bool-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.bool-btn.active {
  background: #42b883;
}

.bool-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.3);
}

.complex-types {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.interface-demo {
  background: rgba(255, 255, 255, 0.05);
  padding: 15px;
  border-radius: 8px;
}

.interface-demo h4 {
  margin-bottom: 10px;
  color: #42b883;
}

.interface-code {
  background: #1e1e1e;
  padding: 15px;
  border-radius: 8px;
  overflow-x: auto;
}

.interface-code pre {
  margin: 0;
  color: #d4d4d4;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.user-form {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
}

.user-form h4 {
  margin-bottom: 15px;
  color: #42b883;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-item.full-width {
  grid-column: 1 / -1;
}

.form-item label {
  font-weight: bold;
  font-size: 12px;
  color: #42b883;
}

.form-input {
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 14px;
}

.vip-control {
  display: flex;
  gap: 10px;
}

.vip-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.vip-btn.active {
  background: #42b883;
}

.vip-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.3);
}

.skills-section {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
}

.skills-section h4 {
  margin-bottom: 15px;
  color: #42b883;
}

.skills-input {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.skill-input {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 14px;
}

.add-skill-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  background: #42b883;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-skill-btn:hover {
  background: #369870;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(66, 184, 131, 0.3);
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
}

.remove-skill {
  background: rgba(220, 53, 69, 0.5);
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  color: white;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-skill:hover {
  background: rgba(220, 53, 69, 0.8);
}

.validation-panel {
  background: rgba(255, 255, 255, 0.1);
  padding: 25px;
  border-radius: 15px;
}

.validation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.validation-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 10px;
}

.validation-card h5 {
  margin-bottom: 15px;
  color: #42b883;
  font-size: 16px;
}

.object-display {
  background: #1e1e1e;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow-x: auto;
}

.object-display pre {
  margin: 0;
  color: #d4d4d4;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.type-info p {
  margin-bottom: 10px;
  font-weight: bold;
  color: #42b883;
}

.type-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.type-check {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 12px;
}

.type-check.valid {
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

.type-check.invalid {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

.check-field {
  font-weight: bold;
}

.check-type {
  opacity: 0.8;
}

.inference-demo {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.inference-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 15px;
  border-radius: 8px;
}

.inference-item code {
  background: #1e1e1e;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #d4d4d4;
}

.inference-result {
  margin-top: 10px;
  padding: 10px;
  background: rgba(66, 184, 131, 0.1);
  border-radius: 5px;
  font-size: 14px;
}

.tips-section {
  background: rgba(255, 255, 255, 0.1);
  padding: 25px;
  border-radius: 15px;
  margin-top: 30px;
}

.tips-section h3 {
  margin-bottom: 20px;
  color: #42b883;
  font-size: 20px;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.tip-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.tip-card h4 {
  margin-bottom: 10px;
  color: #42b883;
  font-size: 16px;
}

.tip-card p {
  font-size: 14px;
  opacity: 0.9;
}
</style>